
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
	</head>
	<body>
		<div id="app">
			<hello1-com></hello1-com>
			<person-com></person-com>
		</div>
		
		<div id="aaa">
			<hello1-com></hello1-com>
		</div>
		<!-- 定义第一个组件 -->
		<template id="hello1Tem">
			<div>
				<h3>{{msg}}</h3>
			</div>
		</template>
		
		<!-- 定义第二个组件 -->
		<template id="personTem">
			<div>
				<h3>{{msg}}</h3>
			</div>
			
		</template>
		
		<!-- 1. 引入js文件 -->
		<script src="../js/vue.js"></script>
		<!--2.  定义组件 -->
		<script>
			//1.定义对象
			let hello1 = {
				data(){
					return {
						msg: "我是hello1"
					}
				},
				template: "#hello1Tem"
			}
			
			//2.定义对象
			let personCom = {
				data(){
					return {
						msg: "我是中国人"
					}
				},
				template: "#personTem"
			}
			
			const app = new Vue({
				el: "#app",
				//定义·局部组件
				components: {
					//key 组件名称: value 组件内容
					hello1Com: hello1,
					//personCom: personCom
					//如果key与value同名，直接写key
					personCom
				}
			})
		</script>
		
		
	</body>
</html>
